import { useEffect, useState } from 'react'


function AsyncPage(props) {
    // 参数传递 接收的是传递过来的参数名
    const { name } = props;
    // console.log(props)
    const [loading, setLoading] = useState(true); // 设置loading状态为true
    const [person, setPerson] = useState({}); // 设置person 状态为空对象

    useEffect(() => {
        // 首先设置loading为true  2秒后改为false name改成传过来的参数
        setLoading(true);
        setTimeout(() => {
            setLoading(false)
            setPerson({ name })
        }, 2000);
    }, [name]); // 表示当name修改才会执行回调函数
    return (
        <div>
            {loading ? <p>loading...</p> : <p>{person.name}</p>}
        </div>
    )
}

export default function PersonPage() {
    // 设置初始state为空字符串
    const [state, setState] = useState('');
    const changeName = (name) => { // 修改name的函数
        setState(name);
    }
    return (
        <div>
            {/* 首先将state传给name */}
            <AsyncPage name={state}></AsyncPage>
            <button
                onClick={() => {
                    // 点击按钮调用changeName函数并且传参给name
                    changeName('张三')
                }}
            >点击张三</button>
            <button
                onClick={() => {
                    // 点击按钮调用changeName函数并且传参给name
                    changeName('李四')
                }}
            >点击李四</button>
        </div>
    )
}